<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框</title>
    <!--边框样式属性指定要显示什么样的边界。-->
    <!--Remark border-style属性用来定义边框的样式-->
    <!--border-style 值:-->
    <!--none: 默认无边框-->
    <!--dotted: 定义一个点线边框-->
    <!--dashed: 定义一个虚线边框-->
    <!--solid: 定义实线边框-->
    <!--double: 定义两个边框。 两个边框的宽度和 border-width 的值相同-->
    <!--groove: 定义3D沟槽边框。效果取决于边框的颜色值-->
    <!--ridge: 定义3D脊边框。效果取决于边框的颜色值-->
    <!--inset:定义一个3D的嵌入边框。效果取决于边框的颜色值-->
    <!--outset: 定义一个3D突出边框。 效果取决于边框的颜色值-->
    <style>
        p.none {border-style: none;}
        p.dotted {border-style: dotted;}
        p.dashed {border-style: dashed;}
        p.solid {border-style: solid;}
        p.double {border-style: double;}
        p.groove {border-style: groove;}
        p.ridge {border-style: ridge;}
        p.inset {border-style: inset;}
        p.outset {border-style: outset;}
        p.hidden {border-style: hidden;}
    </style>
</head>
<body>
<p class="none">无边框</p>
<p class="dotted">虚线边框</p>
<p class="dashed">虚线边框</p>
<p class="solid">实线边框</p>
<p class="double">双边框</p>
<p class="groove">凹槽边框</p>
<p class="ridge">垄状边框</p>
<p class="inset">嵌入边框</p>
<p class="outset">外凸边框</p>
<p class="hidden">隐藏边框</p>
</body>
</html>